<template>
  <div class="dictBox noBlueBg">
    <div class="item" v-for="(item,pid) in dict.list" :key="pid">
      <h3 :class="{active:dict.activeID===pid}">
        <span @click="showDictTab(item,$event)"><span class="el-icon"
                                                      :class="item.data.length>0?'el-icon-folder':'el-icon-document'"></span>{{item.name}}</span>
        <span class="btn">
        <el-button type="primary" v-if="item.data.length===0" size="mini"
                   @click="importData(item)"><span class="el-icon el-icon-upload2"></span> 上传
        </el-button>

          <el-button  type="warning" plain @click="downExcel(item)" size="mini"><span
            class="el-icon el-icon-download"></span> 下载模板
        </el-button>
        </span>
      </h3>
      <div class="table" v-if="item.data.length===0" v-show="dict.activeID===pid">
      </div>
      <div class="content" v-if="item.data.length>0">
        <div class="sub-item" v-for="itm in item.data" :key="itm.id">
          <h3 :class="{active:dict.activeID===itm.id}">
            <span @click="showDictTab(itm,$event,1)"><span class="el-icon el-icon-document"></span>{{itm.name}}</span>
            <span class="btn">
            <el-button  type="primary" class="import"  @click="importData(itm)" size="mini"><span
              class="el-icon el-icon-upload2"></span> 上传
            </el-button>
            </span>
          </h3>
          <div class="table" v-show="dict.activeID===itm.id">
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: "Dict",
    data() {
      return {
        dict: {
          list: [],
          activeID: '',
          dictTab: {}
        },

        fileList: [],
      }
    },
    mounted() {
      this.loadDictList();
    },
    methods: {
      loadDictList() {
        this.$sysServer.ServerGetDictList().then(data => {
          let list = {};
          data.forEach(item => {
            if (item.pid === '0') {
              list[item.id] = {
                ...item,
                data: []
              }
            }
          });

          data.forEach(item => {
            if (item.pid !== '0') {
              list[item.pid]['data'].push(item)
            }
          });
          this.dict.list = list;
          this.$kkui.loading_deepBlue.hide();
        })
      },

      showDictTab(item, e, isSon) {
        const cover = {
          number: '编号',
          name: '字段名',
          monitorElements: '检测要素定义',
          priority: '优先级'
        };


        if (this.dict.activeID === item.id) return false;
        this.dict.activeID = item.id;

        this.$kkui.loading.show=1;
        this.$sysServer.ServerDictHandle({
          type: item.type.toString()
        }, 'getTab').then(data => {

          this.$kkui.loading.show=0;
          let code = '';
          if (data.length === 0) {
            code = '<div style="height: 30px; font-size: 13px; color: red; text-align: center; line-height: 30px; margin: 10px 0;">当前表格未上传！</div>';
            e.target.parentNode.nextSibling.innerHTML = code;
            return false;
          }
          code += `<table>
            <thead>
              <tr>`;
         if(item.type==='dict_type4'){
           code += `<th>厂商编号</th><th>中文含义</th>`;
         }else if(item.type==='dict_type3'){
           code += `<th>编号</th><th>分类</th><th>字段名</th>`;
         }else{
           code += `<th>编号</th><th>字段名</th>`;
         }


          const d0 = data[0];
          if (d0.monitorElements !== 'false') code += '<th>检测要素定义</th>';
          if (d0.priority !== 'false') code += '<th>优先级</th>';
          code += '</tr></thead><tbody>';
          data.forEach(d => {
            code += `
              <tr><td>${d.number}</td>`;
            if(item.type==='dict_type3') code += `<td>${d.classify}</td>`;
            code += `<td>${d.name}</td>`;
            if (d.monitorElements !== 'false') code += `<td>${d.monitorElements}</td>`;
            if (d.priority !== 'false') code += `<td>${d.priority}</td>`;

            code += '</tr>';
          });

          code += '</tbody></table>';
          e.target.parentNode.nextSibling.innerHTML = code;

        });


      },


      resetOption(formName) {
        this.$refs[formName].resetFields();
      },

      importData(item) {
        this.$kkui.submit({
          title: '上传 - ' + item.name,
          file: !!1
        }, (file) => {

          this.$sysServer.ServerDictHandle({
            file: file,
            type: item.type
          }, 'upload').then(data => {
            this.$kkui.msg({
              icon:1,
              cont:'上传成功！'
            });

          })
        })

      },

      downExcel(item){
        const index = this.$kkui.loading.show();
        this.$server('user.downTemplate', {
          tempalteName: item.type
        }).then(data => {
          const a = document.createElement('a');
          a.href = data;
          a.style.display = 'none';
          a.target = '_blank';
          a.download = item.name + '.xls';
          a.click();
          setTimeout(() => {
            this.$kkui.loading.hide(index);
          }, 3000)
        })
      },
      removeExceed(file) {
        this.fileList = [];
      },
    }
  }
</script>

<style scoped lang="scss">
  .dictBox {
    height: calc(100vh - 61px - 30px);
    overflow-y: auto;

    .item {
      h3 {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
        position: relative;

        span {
          margin-right: 3px;
        }

        .btn {
          position: absolute;

          right: 5px;
          font-size: 13px;
        }
      }

      h3:hover, h3.active {
        color: var(--font-color)
      }

      .content {
        padding-left: 35px;
      }

    }

  }

  /deep/ .table {
    table {
      width: 80%;
      margin: 10px 10%;
      border-collapse: collapse;

      th,td {
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        text-align: center;
      }

      th {
        background-color:#ddd;
      }

      tr:nth-child(odd) td{
        background-color: #f0f0f0;
      }

     tr:nth-child(even) td{
        background-color: #e3e3e3;
      }

    }
  }
</style>
